<script setup lang="ts">
	import detailSkeleton from './components/detail-skeleton.vue';
	import { getHotelDetail, getHotelId, getHotelRooms, postOrdercreate } from '@/api/Hotel'
	import type { Hotel, roomItem } from '@/types'
	import { onMounted, ref, watch, watchEffect } from 'vue';
	import roominfo from './components/roominfo.vue';
	import fontnav from './components/fontnav.vue';
	import datePersonBar from './components/date-person-bar.vue';
	// import hotelInfo from './components/hotel-info.vue';
	import guestInfo from './components/guest-info.vue'
	import { onLoad } from '@dcloudio/uni-app';
	import filterPanelVue from '../order/compontents/filterPanel.vue';
	const loading = ref(false)
	const currentIndex = ref(1)
	const query = defineProps<{
		id ?: number | string,
		destinationId ?: number | string,
	}>()
	const popup = ref(null)
	const popupBottom = ref(null)
	const hotelDes = ref<Hotel>(null)
	const roomList = ref<roomItem[]>([])
	const detailContent = ref('')
	const fiterData = ref({
		Rooms: 1,
		AdultGuests: 1,
		ChildrenGuests: 0,
		ChildrenAges: []
	})
	const date = ref({
		CheckIn: '',
		CheckOut: ''
	})
	onLoad((options) => {
		loading.value = true
		initData()
		const params = JSON.parse(options.params)
		date.value.CheckIn = params.CheckIn
		date.value.CheckOut = params.CheckOut
		fiterData.value.Rooms=params.Rooms
		fiterData.value.AdultGuests=params.AdultGuests
		fiterData.value.ChildrenGuests=params.ChildrenGuests
		// fiterData.value.ChildrenAges=params.ChildrenAges
		console.log(date.value)
		RoomsData()
		loading.value = false

	})

	const initData = async () => {
		const res = await getHotelId(query.id, { destinationId: query.destinationId })
		hotelDes.value = res.data
	}

	const RoomsData = async () => {
		// console.log( Object.values(fiterData.value.ChildrenAges))
		console.log(fiterData.value.ChildrenAges)
		const arr=Array.from({length:fiterData.value.ChildrenGuests}, (index) => {
			return fiterData.value.ChildrenAges
		})
		console.log(arr)
		let info = null
		if (Object.values(fiterData.value.ChildrenAges).length != 0) {
			info = {
				destinationId: query.destinationId,
				...date.value,
				AdultGuests: fiterData.value.AdultGuests,
				ChildrenAges:arr,
				Rooms: fiterData.value.Rooms,
				ChildrenGuests: fiterData.value.ChildrenGuests,
			}
		} else {
			info = {
				destinationId: query.destinationId,
				...date.value,
				AdultGuests: fiterData.value.AdultGuests,
				Rooms: fiterData.value.Rooms,
				ChildrenGuests: fiterData.value.ChildrenGuests,
			}
		}
		const res1 = await getHotelRooms(query.id, info)
		roomList.value = res1.data.rooms.map((item : any) => ({
			id: item.id,
			name: item.name,
			desc: item.informations,
			roomInfo:item.roomInfo,
			// size: item.ratePlans[0]?.bedType,
			bedType: item.ratePlans[0]?.bedType,
			price: item.ratePlans[0]?.price,
			tags: item.amenitys,
			isExpanded: true, // 初始是否展开
			isExpanding: false, // 是否正在展开动画中
			priceItems: item.ratePlans.map((val : any) => ({
				label: (val.breakfasts ? '含早餐' : '无早餐'),
				notice: val.cancelPolicy.title,
				description: val.cancelPolicy.description,
				cancelPolicies: val.cancelPolicies,
				price: `¥${val.price}`,
				memberRate: val.bedType,
				id: val.id,
				bedTypeId: val.bedTypeId
			})),
			morePrice: item.ratePlans.slice(3, -1).lenght
		}))
	}
	const handleCallClick = () => {
		uni.makePhoneCall({ phoneNumber: hotelDes.value.tel });
	};
	const handleMapClick = () => {
		uni.openLocation({
			latitude: Number(hotelDes.value.lat),
			longitude: Number(hotelDes.value.lng),
			name: hotelDes.value.name,
			address: hotelDes.value.address,
		});
	};
	const open = () => {
		popupBottom?.value.open('bottom')
	}
	const changeDate = (data : any) => {
		date.value = data
	}

	const bookHotel = async ({ room, priceItem }) => {
		if (!date.value) {
			return uni.showToast({ title: '请先选择入住日期', icon: 'none' })
		}
		const info = {
			hotelId: query.id,
			roomTypeId: room.id,
			ratePlanId: priceItem.id,
			bedTypeId: priceItem.bedTypeId,
			CheckIn: date.value.CheckIn,
			CheckOut: date.value.CheckOut,
			AdultGuests: fiterData.value.AdultGuests,
			ChildrenAges: fiterData.value.ChildrenAges,
			RoomCount: fiterData.value.Rooms,
			ChildrenGuests: fiterData.value.ChildrenGuests,
			destinationId: query.destinationId
		}
		const res = await postOrdercreate(info)
		console.log(res)
		if (res.data) {
			uni.setStorageSync('fiterData', fiterData.value)
			uni.navigateTo({
				url: `/pages/hotel/booking?id=${res.data}`
			})
		}
	}

	watchEffect(() => {
		// 当 searchText、pageNum 或 filters 变化时，都会触发回调
		console.log('执行搜索：', {
			...date.value,
			...fiterData.value,
		})
		if (!date.value.CheckIn || !date.value.CheckOut) return
		RoomsData()
		// 可以在这里调用接口等操作
	})
</script>

<template>
	<detailSkeleton v-if="loading" />
	<scroll-view scroll-y class="viewport">
		<view class="preview">
			<swiper circular class="swiper">
				<swiper-item class="swiper-item" v-for="item in hotelDes!.pictures" :key="item">
					<image class="swiper-img" mode="aspectFill" :src="item" style="width: 100vw;" />
				</swiper-item>
			</swiper>
			<view class="indicator">
				<text class="current">{{currentIndex}}</text>
				<text class="split">/</text>
				<text class="total">{{hotelDes.pictures.length}}</text>
			</view>
		</view>
		<view class="card">
			<view class="hotel-name">{{hotelDes.name}}</view>
			<view class="hotel-text">{{hotelDes.nameEn}}</view>
			<navigator :url="`/pages/hotel/descinfo?destinationId=${query.destinationId}&id=${query.id}`"
				hover-class="none" class="link">详情/设施 <text class="icon-jiantou2"></text> </navigator>
			<!-- 			 <view class="link" @click="popup?.open('center')">详情/设施 ></view> -->
		</view>
		<view class="card">
			<view class="flex">
				<text class="icon icon-dizhi"></text>
				<text class="ellipsis-1">{{hotelDes.address}}{{hotelDes.addressEn}}</text>
				<text class="more" @tap="handleMapClick">地图</text>
			</view>
			<view class="flex">
				<text><text class="icon icon-tel"></text>{{hotelDes.tel}}</text>
				<text class="more" @tap="handleCallClick">拨打</text>
			</view>
		</view>
		<view class="card">
			<view class="">详情</view>
			<view class="sm">不接受客人入住前或入住后入住人名变更(如有需要，请通过门店或致电预订中心)，不接受让出第三人的代订预订。</view>
		</view>
		<view class="card">
			<datePersonBar @open="open" :date="date"
				:guestNum="fiterData.AdultGuests+'成人'+fiterData.ChildrenGuests+'儿童'" />
		</view>
		<view class="card">
			<roominfo :roomList="roomList" @book="bookHotel" />
		</view>
		<view style="height: 100rpx;"></view>
	</scroll-view>
	<fontnav @call="handleCallClick" />
	<!-- <uni-popup ref="popup" type="center">
		<hotelInfo @close="popup?.close()" :detailContent="detailContent" />
	</uni-popup> -->
	<uni-popup ref="popupBottom" type="bottom">
		<guestInfo :fiterData="fiterData" />
	</uni-popup>
</template>


<style lang="scss" scoped>
	.viewport {
		width: 100vw;
		height: 100vh;
		background-color: #f7f8fa;
	}

	.preview {
		width: 100vw;
		height: 500rpx;
		position: relative;

		.indicator {
			position: absolute;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, .5);
			padding: 10rpx 20rpx;
			font-size: 20rpx;
			color: #fff;
		}

		.swiper {
			height: 500rpx;
			width: 100vw;

			.swiper-item {
				height: 500rpx;
				width: 100vw;

				.swiper-img {
					height: 500rpx;
				}
			}
		}
	}

	.card {
		.link {
			// display: flex;
			// justify-content: end;
			text-align: right;
			color: #3b82f6;
		}

		.hotel-name {
			color: #333;
			font-weight: bold;
			font-size: 32rpx;
		}

		.hotel-text {
			color: #666;
			font-size: 28rpx;
		}

		.flex {
			display: flex;
			justify-content: space-between;
			padding-top: 20rpx;
		}

		.icon {
			padding-right: 10rpx;
			color: #999;
			font-size: 32rpx;
		}

		.more {
			width: 200rpx;
			color: #3b82f6;
			text-align: right;
		}

		.sm {
			font-size: 24rpx;
			line-height: 30rpx;
			color: #666;
		}

	}
</style>